<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8" />
        <title>Panel - ESF Demo</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/site.css" />
        <!--[if lt IE 9]>
        <link rel="stylesheet" href="../legacy/ie8-compatible.css" />
        <![endif]-->
        <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
    </head>
    <body>
        <div id="layout" class="ui-g">
            <div class="ui-u-1-5">
                <ul id="navigator-features" class="ui-list-unstyled">
                    <li><a href="#basic">Basic Panel</a></li>
                    <li><a href="#header">Panel Header</a></li>
                    <li><a href="#footer">Panel Footer</a></li>
                </ul>
            </div>
            <div class="ui-u-4-5">
                <div id="main-header">
                    <h1>Panel</h1>
                    <hr />
                </div>
                <div id="main" class="content">
                    <h2 id="basic">Basic panel</h2>
                    <div class="example">
                        <div class="ui-panel-custom">
                            <div class="ui-panel-body">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </div>
                        </div>
                    </div>

                    <h2 id="header">Panel with header</h2>
                    <div class="example">
                        <div class="ui-panel-custom">
                            <div class="ui-panel-header">
                                <div class="ui-panel-left">
                                    Panel heading without title
                                </div>
                                <div class="ui-panel-right">
                                    <span class="ui-icon-search ui-hover-fade-in"></span>
                                    <span class="ui-icon-close ui-hover-fade-in"></span>
                                </div>
                            </div>
                            <div class="ui-panel-body">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </div>
                        </div>
                        <div class="ui-panel-custom">
                            <div class="ui-panel-header">
                                <div class="ui-panel-left">
                                    Panel heading without title
                                </div>
                                <div class="ui-panel-right">
                                    <span class="ui-text-danger">HOT</span>
                                </div>
                            </div>
                            <div class="ui-panel-body">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </div>
                        </div>
                    </div>

                    <h2 id="footer">Panel with footer</h2>
                    <div class="example">
                        <div class="ui-panel-custom">
                            <div class="ui-panel-body">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </div>
                            <div class="ui-panel-footer">
                                <div class="ui-panel-right">Panel footer</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="assets/google-code-prettify/prettify.js"></script>
        <script src="assets/jquery-1.11.1.min.js"></script>
        <script src="assets/demo.js"></script>
    </body>
</html>
